<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-label {
            width: 60px;
            padding: 0px;
            text-align: left;
            height: 45px;
            line-height: 45px;
            font-size: 15px;
        }

        .layui-input-block {
            margin-left: 75px;
        }

        .layui-input {
            height: 45px;
            font-size: 15px;
        }

        .dtree-select {
            width: 99.5%;
            top: 46px
        }

        .dtree-nav-item {
            padding-left: 0px;
        }

        #dataTree {
            padding-top: 5px;
        }

        .layui-input[disabled], .layui-textarea[disabled] {
            color: black !important;
        }
        .dtree-nav-div cite.dtree-disabled {
            color: black !important;
        }
        .dtree-disabled {
            color: #fe7786 !important;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label required">角色名</label>
                    <div class="layui-input-block">
                        <input type="text" id="roleName" name="roleName" th:value="${role.getRoleName()}"
                               disabled autocomplete="off" class="layui-input layui-disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" th:text="${role.getDescription()}"
                                  class="layui-textarea layui-disabled" disabled></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单分配</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="roleId" th:value="${role.getRoleId()}">
                        <ul id="dataTree" class="dtree" data-id="0"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['dtree', 'form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let roleId = $("#roleId").val();
        let Dtree = dtree.render({
            elem: "#dataTree",
            initLevel: "1",//默认展开层级为1
            width: "100%",
            method: 'get',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
            url: "/my/role/ebuild?roleId=" + roleId + "&disabled=true",
            dataFormat: "list",  //配置data的风格为list
            checkbar: true,  //开启复选框
            checkbarType: "p-casc"
        });
        $("input[name='dtree-nav-checkbox-div']").prop("disabled",false)
    })
</script>
</body>
</html>